<!--  -->
<template>
  <div class="app-container">
    <el-card style="height: 80px; margin-bottom: 10px;">
      <div style="margin-bottom: 20px;">
        <el-row :guest="20">
          <el-col :span="6">
            <el-input v-model="query.name" placeholder="请输入姓名或手机号" clearable @clear="getAdminList"/>
          </el-col>
          <el-col :span="2">
            <el-button type="success" style="margin-left: 10px;" icon="el-icon-search" size="medium"
                       @click="getAdminList">
              搜索
            </el-button>
          </el-col>
          <el-col :span="2">
            <el-button style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" size="medium"
                       @click="add">
              添加
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card>
      <el-table
        v-loading="listLoading"
        :data="list"
        fit
        @sort-change="sortChange"
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" sortable="custom" :class-name="getSortClass('id')" align="center" width="60">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登录名" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机" width="110px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="130px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.telephone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="310px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" plain round @click="toAssignRole(row)">
              分配角色
            </el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" plain round @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" plain round @click="handleDelete(row,$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- START 添加操作员弹出对话框窗口 START -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="700px">
        <el-form ref="dataFormRef" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 600px; margin-left:40px;">
          <el-row>
            <el-col :span="10">
              <el-form-item label="登录名" prop="username">
                <el-input v-model="temp.username" placeholder="登录名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="1">
              <el-form-item label="密码" prop="password">
                <el-input v-model="temp.password" type="password" placeholder="密码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="temp.name" placeholder="姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="1">
              <el-form-item label="手机" prop="phone">
                <el-input v-model="temp.phone" placeholder="手机" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="电话" prop="telephone">
                <el-input v-model="temp.telephone" placeholder="电话" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="1">
              <el-form-item label="地址" prop="address">
                <el-input v-model="temp.address" placeholder="地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="头像" prop="userFace">
            <el-input v-model="temp.userFace" style="display: none" class="id" />
            <single-upload v-model="temp.userFace" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="temp.remark" :autosize="{ minRows: 3, maxRows: 6}" type="textarea" placeholder="请输入备注内容" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEvent()">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?insertData():updateData()">
            确认
          </el-button>
        </div>
      </el-dialog>
      <!-- END 添加操作员弹出对话框窗口 END -->
      <pagination v-show="totalCount>0" :total="totalCount" :page.sync="query.currPageNo" :limit.sync="query.pageSize" @pagination="getAdminList" />
    </el-card>

  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 《组件名称》 from '《组件路径》';
  // 从src/api/user.js中解构出pageUserList()方法并在当前组件中导入
  import {pageUserList, updateState, saveAdmin} from '@/api/user'
  // 导入分页公共组件
  import Pagination from '@/components/Pagination'

  export default {
// import引入的组件需要注入到对象中才能使用
    components: {
      Pagination
    },
    // props实现父子组件传递数据
    props: {},
    data() {
      // 这里存放数据
      return {
        // 用来保存t_admin管理员查询出来的分页列表信息
        list: null,
        // 用来保存分页时所需要的总记录数
        totalCount: 0,
        // 当发送异步请求用户列表数据时设置它为true,可出现正在加载中
        listLoading: true,
        query: {
          // 当前页码
          currPageNo: 1,
          // 每页显示的记录数
          pageSize: 4,
          // 查询条件，此处查询是以用户名和手机号码进行模糊查询
          name: '',
          //排序字段
          sort: '+id'

        },
        // 用于控制添加用户弹出窗口的显示和隐藏
        dialogFormVisible: false,
// 因为添加和编辑用户共用一个弹出窗口，通过dialogStatus来动态设置弹出窗口的标题。
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '添加',
          assign: '分配角色'
        },
// 添加用户的表单对象
        temp: {
          id: undefined,
          name: '',
          phone: '',
          telephone: '',
          address: '',
          state: 1,
          username: '',
          password: '',
          userFace: '',
          remark: ''
        }
        ,
        // 添加表单验证规则对象
        rules: {
          name: [
            { required: true, message: '姓名必填', trigger: 'blur' },
            { min: 2, max: 10, message: '姓名的长度在2~10个字符之间', trigger: 'blur' }],
          phone: [
            { required: true, message: '手机号必填', trigger: 'blur' },
            /* validator: checkPhone 来调用data(){ }中定义的手机号格式校验规则 */
            { validator: checkPhone, trigger: 'blur' }
          ],
          username: [
            { required: true, message: '登录名必填', trigger: 'blur' },
            { min: 2, max: 10, message: '登录名的长度在2~10个字符之间', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '密码长度在3~15位之间', trigger: 'blur' }
          ]
        }
      }
      // 验证手机的自定义校验规则
      var checkPhone = (rule, value, callback) => {
        // 定义验证手机号码的正则表达式
        const regMobile = /^1\d{10}$/
        if (regMobile.test(value)) {
          return callback()
        } else {
          return callback(new Error('请输入合法的手机号码'))
        }
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // 调用查询管理员分页列表信息的方法
      this.getAdminList()
    }, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    }, // 生命周期 - 创建之前
    beforeMount() {
    }, // 生命周期 - 挂载之前
    beforeUpdate() {
    }, // 生命周期 - 更新之前
    updated() {
    }, // 生命周期 - 更新之后
    beforeDestroy() {
    }, // 生命周期 - 销毁之前
    destroyed() {
    }, // 生命周期 - 销毁完成
    activated() {
    },
    // 方法集合
    methods: {
      // 定义查询管理员分页列表信息的方法
      getAdminList() {
        // true时，表格中就会出现正在加载图标
        this.listLoading = true
        // 调用src/api/user.js中的pageUserList()
        pageUserList(this.query).then((res) => {
          this.listLoading = false
          this.list = res.data.list
          // 获取总记录数
          this.totalCount = res.data.totalCount
        }).catch((error) => {
          console.log(error)
          this.$message({
            title: '提示',
            message: '操作员列表查询失败',
            type: 'error',
            duration: 2000
          })
        })
      },
      // 编辑按扭的点击事件
      handleUpdate(row) {

      },
      // 删除按扭的点击事件
      handleDelete(row, index) {
      },
      // 排序
      sortChange(data) {
        console.log(data)
        // data.prop为排序字段，这里是id。 data.order为点击上下箭头的值，
        // 如果点击下箭头val.order的值为descending，反之为ascending
        const {prop, order} = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.query.sort = '+id'
        } else {
          this.query.sort = '-id'
        }
        this.query.currPageNo = 1
// 传到后端时this.query.sort的值为+id或为-id
        this.getAdminList()
      },
      getSortClass: function (key) {
        const sort = this.query.sort
        return sort === `+${key}` ? 'ascending' : 'descending'
      },
      // 监听switch开关状态的改变
      adminStateChange(adminInfo) {
        // 打印输出传递过来的scope.row信息，即传递过来的操作员信息
        console.log(adminInfo)
      },
      // 重置Temp对象
      resetTemp() {
        this.temp = {
          id: undefined,
          name: '',
          phone: '',
          telephone: '',
          address: '',
          state: 1,
          username: '',
          password: '',
          userFace: '',
          remark: ''
        }
      },
      // 添加用户按扭的点击事件
      add() {
        this.resetTemp() // 重置Temp表单对象
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      }
      ,
      // 新增操作员对话框中的[确认]按扭的点击事件
      insertData() {
        this.$refs['dataFormRef'].validate((valid) => {
          if (valid) {
            // 调用user.js中的saveAdmin方法发送请求到后端实现保存新增的操作员信息
            saveAdmin(this.temp).then((res) => {
              this.list.unshift(this.temp)
              // false后隐藏添加操作员对话框
              this.dialogFormVisible = false
              if (res.code === 200) {
                // 新增成功后，再刷新操作员管理列表数据
                this.getAdminList()
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            }).catch((err) => {
              console.log(err)
            })
          }
        })
      },
      // 添加操作员信息对话框中的取消按扭点击事件
      cancelEvent() {
        this.dialogFormVisible = false
        // 重置表单数据
        this.$refs['dataFormRef'].resetFields()
      },

    }
  }
</script>
<style scoped>

</style>
